<template>
  <div class="limit_setting">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>权限配置
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(0)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe662;</span>刷新
          </el-button>
        </div>
      </div>
    </div>
    <div class="body_container">
      <div class="body_left">
        <div><span>当前角色：</span><span>{{$route.params.roles.roleName}}</span></div>
        <button @click="commit">提交</button>
        <el-input
          placeholder="输入关键字进行筛选"
          v-model="filterText"
          style="width:216px;margin:10px auto;"
        ></el-input>
        <el-tree
          :data="data"
          show-checkbox
          default-expand-all
          :filter-node-method="filterNode"
          node-key="authId"
          ref="tree"
          highlight-current
          :props="defaultProps">
</el-tree>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "orgSetting",
  data() {
    return {
      defaultProps: {
          children: 'partList',
          label: 'authName'
        },
      // 搜索框的值
      filterText: "",
      // 树状图的数据
     data: [],
    };
  },
  mounted() {
    // 获取数据 渲染已选择的数据
    this.dataInit();
  },
  methods: {
    dataInit(){
      let that = this;
      let suCb = function(res){
        that.data = res.data.data.parentList;
        if(res.data.data.roleAuthList!=undefined){
          let arr = res.data.data.roleAuthList.map(function (item) {
            return item.authId
          });
          that.setCheckedKeys(arr);
        }
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
        roleId:that.$route.params.roles.roleId
      }
      let palyParam = {
        url: "/api/web/sysAuthority/getAuthorityList",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    //获取权限
    limit(){
      let that = this;
      let suCb = res => {
          localStorage.setItem("ms_limit", JSON.stringify(res.data.data));
          that.$router.push({name:'role'});
        },
        erCb = res => {
          console.log(res)
        },
        req = {
          url:"/api/web/sysUser/getUserAuthoritys",
          methods:"post",
          data:{userId:localStorage.getItem("ms_userId")},
          success:suCb,
          error:erCb
        }
      that.$https(req)
    },
    // 搜索框 过滤函数
    filterNode(value, data) {
      if (!value) return true;
      return data.authName.indexOf(value) !== -1;
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys())
    },
    setCheckedKeys(val) {
      this.$refs.tree.setCheckedKeys(val)
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    },
    commit(){
//      let arr=[].concat(this.$refs.tree.getCheckedKeys());
      let arr=[].concat(this.$refs.tree.getHalfCheckedKeys(),this.$refs.tree.getCheckedKeys());
//      console.log(arr)
      let resultarr = [...new Set(arr)];
      console.log(resultarr)
      this.setLimit(resultarr);
    },
    //设置权限
    setLimit(val){
      let that = this;
      let suCb = function(res){
//          that.$router.push({name:'role'});
          that.limit();
        console.log(res)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
        list:val,
        roleId:that.$route.params.roles.roleId
      }
      let palyParam = {
        url: "/api/web/sysRoleAuth/insertInfo",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    }
  },
  watch: {
    // 侦听 当前搜索框的值
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  }
};
</script>

<style scoped>
.body_container {
  width: 1100px;
  margin: 30px auto;
  display: flex;
  justify-content: space-between;
}

.body_left {
  width: 1100px;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  min-height: 800px;
  padding: 10px;
  box-sizing: border-box;
  text-align: left;
}
.body_left button{
  padding: 7px 20px;
  background: #1ABC9C;
  border:none;
  border-radius: 4px;
  color: #fff;
}
</style>

